<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>


<body>
    <div class="heng">
        <div class="lan_">空调</div>
        <div class="lan_">平板电视</div>
        <div class="lan_">生活电器</div>
        <div class="lan_">洗衣机</div>
        <div class="lan_">冰箱</div>
        <div class="lan_">厨房大电</div>
    </div>
    <div class="nei">

    </div>
    <h1>购物车</h1>
    <h3>总价: <span class="money">0</span></h3>
    <input type="checkbox" onclick="qf()" class="qf_n">全选/反选
    <ul>
        <li>
            <img src="" alt="">
            <span></span>
            <span></span>
            <button>-</button>
            <span>数量</span>
            <button>+</button>

        </li>
    </ul>
    <script>
        // 数据
        var kt = [{
            pid: 0,
            id: 1,
            img: 'https://img13.360buyimg.com/n1/jfs/t1/281844/17/8392/95045/67e0d268Fa01b1e1e/761a9c23ac5c6e8a.jpg.avif',
            introduce: 'CL京东联名 1.5匹新一级能效 真省电SE挂机',
            price: 1649
        },
        {
            pid: 0,
            id: 2,
            img: 'https://img13.360buyimg.com/n1/jfs/t1/284829/11/2807/147016/67d52c5dFa47d841c/9b922bb3beca80c9.jpg.avif',
            introduce: '空调大1.5匹冷暖节能变频大风量卧室单冷壁挂式大一匹冷暖',
            price: 899
        },
        {
            pid: 1,
            id: 3,
            img: 'https://img13.360buyimg.com/n1/jfs/t1/284446/24/5748/176449/67dbcc59Fa34d42f4/dda2c2b81f5aa2bb.jpg.avif',
            introduce: '奥克斯（AUX）空调挂机1匹/1.5匹新一级/三级能效',
            price: 1699
        },
        {

            pid: 1,
            id: 4,
            img: 'https://img10.360buyimg.com/n1/jfs/t1/260593/21/28421/135184/67c87bafF46dcb2ff/f36e6f7dc95422ba.png.avif',
            introduce: '大1.5匹冷暖变频家用空调挂机1匹单冷出租房卧式壁挂式一级能效',
            price: 899
        },
        {
            pid: 2,
            id: 5,
            img: 'https://img10.360buyimg.com/n1/jfs/t1/274172/29/2041/129742/67d1b9c6F9bfd5808/06490fbe8343f694.png.avif',
            introduce: '新一级能效空调大1.5匹挂机家用出租屋空调卧室冷暖挂机节能省电壁挂式',
            price: 1649
        },
        {
            pid: 2,
            id: 6,
            img: 'https://img14.360buyimg.com/n1/jfs/t1/277004/11/7035/99571/67dccc51F8d6dc560/ccb0bbcc9b97d724.jpg.avif',
            introduce: '海信（Hisense）空调 大1匹/1.5匹 易省电 空调挂机 AI省电 速冷热 咨询享补贴',
            price: 1799
        },
        {
            pid: 3,
            id: 7,
            img: 'https://img11.360buyimg.com/n1/jfs/t1/277887/15/7187/173611/67dd2609Fbd2f5cae/6695be1e4606f791.jpg.avif',
            introduce: ' 美的（Midea）空调挂机大一匹酷省电 一级能效全直流变频冷暖空调 双节能低噪 智能除菌大风量 ',
            price: 1649
        },
        {
            pid: 3,
            id: 8,
            img: 'https://img10.360buyimg.com/n1/jfs/t1/274203/35/7155/170198/67dd1df4F1f960fe6/00dc833dd91564f5.jpg.avif',
            introduce: '海尔空调净省电Plus1.5匹强劲冷暖新一级能效节能变频家用挂机壁挂式一键AI省电除菌 全屋智联独立除湿',
            price: 1649
        },
        {
            pid: 4,
            id: 9,
            img: 'https://img10.360buyimg.com/n1/jfs/t1/284268/40/4686/99552/67d96cc4Fd3ef592c/b77973e21aa9b9df.jpg.avif',
            introduce: '家小米221升 三门小型家用电冰箱 三门三温节能安静运行冷冻冷藏',
            price: 998,
        },
        {
            pid: 4,
            id: 10,
            img: 'https://img12.360buyimg.com/n1/jfs/t1/261563/18/30303/156661/67cd1a01Fbb9050e3/3a5e3763c04a8329.jpg.avif',
            introduce: '冰箱迷你小型家用商用两用宿舍出租房用双门 58B138升级款',
            price: 376,
        },
        {
            pid: 5,
            id: 11,
            img: 'https://img12.360buyimg.com/n1/jfs/t1/261563/18/30303/156661/67cd1a01Fbb9050e3/3a5e3763c04a8329.jpg.avif',
            introduce: '冰箱迷你小型家用商用两用宿舍出租房用双门 58B138升级款',
            price: 376,
        },
        {
            pid: 5,
            id: 12,
            img: 'https://img12.360buyimg.com/n1/jfs/t1/261563/18/30303/156661/67cd1a01Fbb9050e3/3a5e3763c04a8329.jpg.avif',
            introduce: '冰箱迷你小型家用商用两用宿舍出租房用双门 58B138升级款',
            price: 376,
        },
        {
            pid: 6,
            id: 13,
            img: 'https://img12.360buyimg.com/n1/jfs/t1/261563/18/30303/156661/67cd1a01Fbb9050e3/3a5e3763c04a8329.jpg.avif',
            introduce: '冰箱迷你小型家用商用两用宿舍出租房用双门 58B138升级款',
            price: 376,
        },
        {
            pid: 6,
            id: 13,
            img: 'https://img12.360buyimg.com/n1/jfs/t1/261563/18/30303/156661/67cd1a01Fbb9050e3/3a5e3763c04a8329.jpg.avif',
            introduce: '冰箱迷你小型家用商用两用宿舍出租房用双门 58B138升级款',
            price: 376,
        },
        ]

        // 渲染
        var lan = document.querySelectorAll('.lan_')
        var nei = document.querySelector('.nei')
        kt.forEach(item2 => {
            if (item2.pid == 0) {
                nei.innerHTML += `
                        <div>
                             <img src="${item2.img}" width="200px" height="200px" onclick='add(${item2.id})'>
                             <span>${item2.introduce}</span>
                             <span>${item2.price}</span>
                        </div>
                        `
            }
        })


        lan.forEach((item, index) => {
            item.addEventListener('click', () => {
                nei.innerHTML = ''
                kt.forEach(item2 => {
                    if (item2.pid == index) {
                        nei.innerHTML += `
                        <div>
                             <img src="${item2.img}" width="200px" height="200px" onclick='add(${item2.id})'>
                             <span>${item2.introduce}</span>
                             <span>${item2.price}</span>
                        </div>
                        `
                    }
                })
            })
        });

        // 购物车数组
        var gwc_arr = []

        // 添加
        var ul = document.querySelector('ul')
        function add(i) {
            var a = kt.find(item => item.id == i)
            gwc_arr.push({
                id: gwc_arr.length,
                introduce: a.introduce,
                img: a.img,
                price: a.price,
                num: 1,
                is: false
            })
            apply()
        }

        function apply() {
            ul.innerHTML = ''
            gwc_arr.forEach(item => {
                ul.innerHTML += `
                <li>
                    <input type="checkbox" ${item.is ? 'checked' : ''}onclick="fu(${item.id})">
                    <img src="${item.img}" alt="">
                    <span>${item.introduce}</span>
                    <span>${item.price}</span>
                    <button onclick='jian(${item.id})'>-</button>
                    <span>${item.num}</span>
                    <button onclick='jia(${item.id})'>+</button>
                    <button onclick='del(${item.id})'>删除</button>
                </li>
                `
            })
            zong()
        }



        // 数量加
        function jia(i) {
            var a = gwc_arr.find(item => item.id == i)
            a.num++
            apply()
            zong()
        }
        // 数量减
        function jian(i) {
            var a = gwc_arr.find(item => item.id == i)
            if (a.num != 0) {
                a.num--
                apply()
                zong()
            }
        }
        // 总价
        var money = document.querySelector('.money')
        function zong() {
            var num = 0
            gwc_arr.forEach(item2 => {
                if (item2.is) {
                    num += item2.price * item2.num
                }
            })
            money.innerHTML = num
        }


        function fu(i) {
            var a = gwc_arr.find(item => item.id == i)
            a.is = !a.is
            zong()
        }

        // 删除
        function del(i) {
            let index = gwc_arr.findIndex(item => item.id === i);
            if (index !== -1) {
                gwc_arr.splice(index, 1);
                apply();
            }
        }


        // 全选反选
        var q = document.querySelector('.qf_n')
        function qf() {
            var c = q.checked
            gwc_arr.forEach(item => {
                item.is = c;
            });
            apply();
        }
        apply();
    </script>
</body>

</html>